<!--
 * @Author: 张久冬
 * @Date: 2021-12-27 16:09:44
 * @
# Description:
-->
<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <JdCard title="分类商品数量(饼图)">
          <pieEcharts :pieData="categoryGoodsCount"></pieEcharts>
        </JdCard>
      </el-col>
      <el-col :span="10">
        <JdCard title="不同城市商品数量">2</JdCard>
      </el-col>
      <el-col :span="7">
        <JdCard title="分类商品数量(玫瑰图)">3</JdCard>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="contentRow">
      <el-col :span="12">
        <JdCard title="分类商品销量">1</JdCard>
      </el-col>
      <el-col :span="12">
        <JdCard title="分类商品收藏">1</JdCard>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from '@/store/index'
import JdCard from '@/base-ui/card'
import { pieEcharts } from '@/componments/page-echarts'

export default defineComponent({
  name: 'dashboard',
  components: { JdCard, pieEcharts },
  setup() {
    const Store = useStore()
    Store.dispatch('dashboard/getDashBoardDataAction')
    const categoryGoodsCount = computed(() => {
      return Store.state.dashboard.categoryGoogsCount.map((item) => ({
        name: item.name,
        value: item.goodsCount
      }))
    })
    return { categoryGoodsCount }
  }
})
</script>

<style scoped>
.contentRow {
  margin-top: 30px;
}
</style>
